<template>
  <view>
    <view class="popup" :class="isshowArea ? 'show' : ''">
      <view class="picker-btn">
        <view class="left" @click="cancel">取消</view>
        <view class="right" @click="affirm">确定</view>
      </view>
      <picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindCityChange">
        <picker-view-column>
          <view class="item" v-for="(item,index) in provinceList[0]" :key="index">{{ item }}</view>
        </picker-view-column>
        <picker-view-column v-if="provinceList[0][valueArr[0]]">
          <view class="item" v-for="(item,index) in provinceList[1][0]" :key="index">{{ item }}</view>
        </picker-view-column>
        <picker-view-column v-if="provinceList[0][valueArr[0]]">
          <view class="item" v-for="(item,index) in provinceList[2][0]" :key="index">{{ item }}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view v-if="isshowArea" class="mask" @click="cancel" />
  </view>
</template>
<script>
import { selectByTypeRegion, getSubInfo } from "../util/api/policy.js";
export default {
  props: {
    isshowArea: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dataItem: {
        closeDay: "", // 选中的时间
        departmentId: "", // 选中的部门id
        province: "", // 省份
        city: "", // 城市
        area: "" // 地区
      },
      valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
      provinceList: [[], [], []],
      indicatorStyle: `height: ${Math.round(
        uni.getSystemInfoSync().screenWidth / (750 / 100)
      )}px;`
    };
  },
  mounted() {
    this.initLoadArea();
  },
  methods: {
    bindCityChange(e) {
      const val = e.detail.value;
      this.dataItem.departmentId = "";
      this.dataItem.closeDay = "";
      this.departmentData = "";

      console.log(666, val);
      if (this.valueArr[0] !== val[0]) {
        val[1] = 0;
        val[2] = 0;
        if (this.provinceList[0][val[0]] == "国家") {
          let cityArr = ["请选择"];
          this.provinceList[1].splice(0, 1, cityArr);
          this.provinceList[2].splice(0, 1, cityArr);
        } else {
          this.loadCity(this.provinceList[0][val[0]]);
        }
      } else if (this.valueArr[1] !== val[1]) {
        this.loadArea(this.provinceList[1][0][val[1]]);
      } else if (this.valueArr[2] !== val[2]) {
        // console.log(this.provinceList[2][0][val[2]])
      }

      this.valueArr = val;
    },
    // 进入页面省份查询
    async initLoadArea(type) {
      if (type) {
        this.type = type;
      }
      let params = {
        type: this.type, // 类型(政策通知:0 政策解读:1 部门:2 项目:3 最新资讯:4)
        city: "", // 城市
        province: "" //省份
      };
      const substation = await getSubInfo();
      if (substation.result.city !== "" && substation.result.province !== "") {
        // if (substation.result.city == "" && substation.result.province == "") {
        // substation.result.province = "湖南省";
        let provinceArr = [];
        provinceArr[0] = "国家";
        provinceArr[1] = substation.result.province;
        this.provinceList[0] = provinceArr;

        await this.loadCity(this.provinceList[0][0]);
      } else {
        const data = await selectByTypeRegion(params);
        this.provinceList[0] = data.result;
        await this.loadCity(data.result[0]);
      }
    },
    // 加载城市
    async loadCity(province) {
      this.province = province;
      let params = {
        type: this.type, // 类型(政策通知:0 政策解读:1 部门:2 项目:3 最新资讯:4)
        city: "", // 城市
        province: province //省份
      };
      const substation = await getSubInfo();
      if (substation.result.city !== "" && substation.result.province !== "") {
        // if (substation.result.city == "" && substation.result.province == "") {
        // substation.result.city = "长沙市";
        let cityArr = [];
        cityArr[0] = "请选择";
        cityArr[1] = substation.result.city;
        this.provinceList[1].splice(0, 1, cityArr);
        await this.loadArea(this.provinceList[1][0][0]);
      } else {
        const data = await selectByTypeRegion(params);
        var arr = [];
        data.result.forEach(item => {
          arr.push(item);
        });
        this.provinceList[1].splice(0, 1, arr);
        this.provinceList[1][0].unshift("请选择");
        await this.loadArea(data.result[0]);
      }
    },
    // 加载地区
    async loadArea(city) {
      let params = {
        type: this.type, // 类型(政策通知:0 政策解读:1 部门:2 项目:3 最新资讯:4)
        city: city, // 城市
        province: this.province //省份
      };
      const data = await await selectByTypeRegion(params);
      var arr = [];
      data.result.forEach(item => {
        arr.push(item);
      });
      this.provinceList[2].splice(0, 1, arr);
      this.provinceList[2][0].unshift("请选择");
    },
    affirm() {
      // this.$emit('affirm')
      this.dataItem.province = this.provinceList[0][this.valueArr[0]];
      this.dataItem.city = this.provinceList[1][0][this.valueArr[1]];
      this.dataItem.area = this.provinceList[2][0][this.valueArr[2]];

      this.$emit(
        "affirm",
        this.dataItem.province,
        this.dataItem.city,
        this.dataItem.area
      );
    },
    cancel() {
      this.$emit("cancel");
    },
    setArr() {
      this.valueArr = [0, 0, 0];
    }
  }
};
</script>

<style lang="less" scoped>
picker-view {
  width: 100%;
  height: 510upx;
  background: #fff;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.popup {
  width: 100%;
  // position: absolute;
  position: fixed;
  z-index: 999;
  height: 0upx;
  overflow: hidden;
  bottom: 0upx;
  box-sizing: border-box;
  .picker-btn {
    display: flex;
    height: 100upx;
    width: 100%;
    line-height: 100upx;
    background: #fff;
    font-size: 17px;
    z-index: 1;
    border-bottom: 1rpx solid #f8f8f8;

    .left {
      flex: 1;
      color: #0076ff;
      padding-left: 40upx;
      box-sizing: border-box;
    }

    .right {
      flex: 1;
      text-align: right;
      padding-right: 40upx;
      color: #fe4533;
      box-sizing: border-box;
    }
  }
}
.show {
  height: 600upx;
  transition: height 0.3s;
}
.mask {
  position: fixed;
  z-index: 998;
  top: 0upx;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>
